{% extends "base.html" %}

{% block content %}
<style>
/* 液态玻璃页面标题 */
.page-title {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
}

.page-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.page-title h2 {
    color: #1C1C1E !important;
    text-shadow: 0 2px 4px rgba(0, 122, 255, 0.1);
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 1.5rem;
}

/* 液态玻璃卡片 */
.card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: var(--transition) !important;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem !important;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
}

.card-header {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: #1C1C1E !important;
    font-weight: 600;
    position: relative;
    z-index: 1;
    padding: 1rem 1.5rem !important;
}

.card-body {
    position: relative;
    z-index: 1;
    color: #1C1C1E !important;
    padding: 1.5rem !important;
}

.card-footer {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-top: 1px solid var(--glass-border) !important;
    position: relative;
    z-index: 1;
    padding: 1rem 1.5rem !important;
}

/* 液态玻璃表格 */
.table {
    background: transparent !important;
    color: #1C1C1E !important;
    margin-bottom: 0;
}

.table thead th {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-color: var(--glass-border) !important;
    color: #1C1C1E !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--glass-border) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
}

.table tbody td {
    padding: 0.5rem 0.75rem !important;
    vertical-align: middle !important;
    border-color: var(--glass-border) !important;
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.table thead th::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.table tbody td {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    transition: var(--transition) !important;
    position: relative;
    z-index: 1;
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transition: var(--transition) !important;
}

/* 液态玻璃徽章 */
.badge {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
}

.badge:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* 液态玻璃按钮 */
.btn {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: var(--transition) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.btn-primary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    padding: 0.75rem 1.5rem !important;
}

.btn-primary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.btn-info {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    padding: 0.75rem 1.5rem !important;
}

.btn-info:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.btn-success {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    padding: 0.75rem 1.5rem !important;
}

.btn-success:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    padding: 0.75rem 1.5rem !important;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.btn-outline-primary {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #1C1C1E !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
}

.btn-outline-primary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.btn-outline-danger {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #1C1C1E !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
}

.btn-outline-danger:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.btn-outline-warning {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #1C1C1E !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
}

.btn-outline-warning:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

/* 液态玻璃代码块 */
code {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    padding: 0.2rem 0.4rem !important;
    color: #1C1C1E !important;
    font-size: 0.875em !important;
}

/* 紧凑的徽章样式 */
.badge {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
}

/* 紧凑的文本样式 */
.table small {
    font-size: 0.8rem !important;
}

/* 液态玻璃模态框 */
.modal-content {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--glass-shadow) !important;
}

.modal-header {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: #1C1C1E !important;
}

.modal-body {
    color: #1C1C1E !important;
}

.modal-footer {
    background: rgba(255, 255, 255, 0.05) !important;
    border-top: 1px solid var(--glass-border) !important;
}

/* 液态玻璃表单控件 */
.form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    color: #1C1C1E !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 
        0 0 0 0.2rem rgba(255, 255, 255, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px);
    color: #1C1C1E !important;
}

.form-control::placeholder {
    color: rgba(28, 28, 30, 0.6) !important;
}

/* 表单标签和文本 */
.form-label {
    color: #1C1C1E !important;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 122, 255, 0.1);
}

.form-text {
    color: rgba(28, 28, 30, 0.7) !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
}

/* 液态玻璃警告框 */
.alert {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
    color: #1C1C1E !important;
    position: relative;
    overflow: hidden;
}

.alert::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.alert-danger {
    border-left: 4px solid #dc3545 !important;
}

/* 液态玻璃空状态 */
.text-center.py-4 {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
    border-radius: var(--border-radius);
    border: 1px solid var(--glass-border);
    margin: 1rem 0;
}

/* 液态玻璃加载状态 */
.spinner-border {
    color: #1C1C1E !important;
}

/* 文件夹卡片特殊样式 */
.folder-card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: var(--transition) !important;
    position: relative;
    overflow: hidden;
    height: 100% !important;
}

.folder-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.folder-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
}

.folder-card .card-body {
    position: relative;
    z-index: 1;
    color: #1C1C1E !important;
}

.folder-card .card-footer {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-top: 1px solid var(--glass-border) !important;
    position: relative;
    z-index: 1;
}

/* 暗色模式适配 */
[data-theme="dark"] .page-title {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .page-title::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .page-title h2 {
    color: #ffffff !important;
}

[data-theme="dark"] .card {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .card-header {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .card-body {
    color: #ffffff !important;
}

[data-theme="dark"] .card-footer {
    background: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .table {
    color: #ffffff !important;
}

[data-theme="dark"] .table thead th {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .table thead th::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .table tbody td {
    color: #ffffff !important;
}

[data-theme="dark"] .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .btn-primary {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-primary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-info {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-info:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-success {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-success:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-primary {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-danger {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] code {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .modal-content {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .modal-header {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .modal-body {
    color: #ffffff !important;
}

[data-theme="dark"] .modal-footer {
    background: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .form-control {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .form-control:focus {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .form-label {
    color: #ffffff !important;
}

[data-theme="dark"] .form-text {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .alert {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .alert::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .text-center.py-4 {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .spinner-border {
    color: #ffffff !important;
}

[data-theme="dark"] .folder-card {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .folder-card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .folder-card .card-body {
    color: #ffffff !important;
}

[data-theme="dark"] .folder-card .card-footer {
    background: rgba(0, 0, 0, 0.2) !important;
}
</style>

<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="page-title">
        <div class="d-flex justify-content-between align-items-center">
        <h2><i class="fas fa-upload me-2"></i>用户自定义脚本管理</h2>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#createFolderModal">
                <i class="fas fa-folder-plus me-1"></i>新建文件夹
            </button>
            <a href="{{ url_for('upload_custom_script') }}" class="btn btn-primary">
                <i class="fas fa-upload me-1"></i>上传脚本
            </a>
            <a href="{{ url_for('extended_tasks') }}" class="btn btn-success">
                <i class="fas fa-clock me-1"></i>任务管理
            </a>
            </div>
        </div>
    </div>

    <!-- 文件夹列表卡片 -->
    <div class="card">
        <div class="card-header">
            <h6 class="m-0 font-weight-bold">
                <i class="fas fa-folder me-2"></i>文件夹管理
            </h6>
        </div>
        <div class="card-body">
            <div id="foldersContainer">
                <div class="text-center py-3">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <p class="mt-2 text-muted">正在加载文件夹列表...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 脚本列表卡片 -->
    <div class="card">
        <div class="card-header">
            <h6 class="m-0 font-weight-bold">
                <i class="fas fa-list me-2"></i>脚本列表
            </h6>
        </div>
        <div class="card-body">
            {% if scripts %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th><i class="fas fa-tag me-1"></i>脚本名称</th>
                                <th><i class="fas fa-user me-1"></i>所属用户</th>
                                <th><i class="fas fa-file-code me-1"></i>文件名</th>
                                <th><i class="fas fa-hdd me-1"></i>文件大小</th>
                                <th><i class="fas fa-calendar me-1"></i>上传时间</th>
                                <th><i class="fas fa-cogs me-1"></i>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for script in scripts %}
                            <tr>
                                <td>
                                    <strong>{{ script.name }}</strong>
                                </td>
                                <td>
                                    <span class="badge bg-secondary">{{ script.user.username }}</span>
                                </td>
                                <td>
                                    <code>{{ script.filename }}</code>
                                </td>
                                <td>
                                    {% if script.file_size < 1024 %}
                                        {{ script.file_size }} B
                                    {% elif script.file_size < 1024 * 1024 %}
                                        {{ "%.1f"|format(script.file_size / 1024) }} KB
                                    {% else %}
                                        {{ "%.1f"|format(script.file_size / (1024 * 1024)) }} MB
                                    {% endif %}
                                </td>
                                <td>
                                    {{ script.upload_time.strftime('%Y-%m-%d %H:%M:%S') }}
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ url_for('edit_custom_script', script_id=script.id) }}" 
                                           class="btn btn-sm btn-outline-primary"
                                           title="编辑脚本">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form method="post" action="{{ url_for('delete_custom_script', script_id=script.id) }}" style="display:inline;" onsubmit="return confirm('确定要删除此脚本吗？此操作不可恢复！')">
                                            <button type="submit" class="btn btn-sm btn-outline-danger" title="删除脚本">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-upload fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">暂无脚本</h5>
                    <p class="text-muted">点击"上传脚本"按钮上传您的第一个Python脚本</p>
                    <a href="{{ url_for('upload_custom_script') }}" class="btn btn-primary">
                        <i class="fas fa-upload me-1"></i>上传脚本
                    </a>
                </div>
            {% endif %}
        </div>
    </div>

    <!-- 新建文件夹模态框 -->
    <div class="modal fade" id="createFolderModal" tabindex="-1" aria-labelledby="createFolderModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createFolderModalLabel">
                        <i class="fas fa-folder-plus me-2"></i>新建文件夹
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="createFolderForm">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="folder_name" class="form-label">
                                <i class="fas fa-folder me-1"></i>文件夹名称
                            </label>
                            <input type="text" class="form-control" id="folder_name" name="folder_name" 
                                   placeholder="请输入文件夹名称" required>
                            <div class="form-text">
                                <i class="fas fa-info-circle me-1"></i>文件夹名称支持中文，长度不能超过50个字符
                            </div>
                        </div>
                        <!-- 消息显示区域 -->
                        <div id="createFolderMessage" style="display: none;"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times me-1"></i>取消
                        </button>
                        <button type="submit" class="btn btn-primary" id="createFolderBtn">
                            <i class="fas fa-folder-plus me-1"></i>创建文件夹
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

<script>
// 加载文件夹列表
function loadFolders() {
    // 根据用户权限选择不同的API端点
    const apiUrl = {% if current_user.is_administrator() %}
        '{{ url_for("list_all_custom_folders") }}'
    {% else %}
        '{{ url_for("list_custom_folders") }}'
    {% endif %};
    
    // 添加时间戳参数防止缓存
    const nocacheUrl = apiUrl + (apiUrl.includes('?') ? '&' : '?') + '_=' + new Date().getTime();
    
    fetch(nocacheUrl, {
        headers: {
            'Cache-Control': 'no-cache, no-store, must-revalidate',
            'Pragma': 'no-cache',
            'Expires': '0'
        },
        credentials: 'same-origin' // 添加凭据，确保会发送Cookie
    })
        .then(response => response.json())
        .then(data => {
            const container = document.getElementById('foldersContainer');
            
            if (data.error) {
                container.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        加载文件夹列表失败: ${data.error}
                    </div>
                `;
                return;
            }
            
            if (data.folders.length === 0) {
                container.innerHTML = `
                    <div class="text-center py-4">
                        <i class="fas fa-folder fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">暂无文件夹</h5>
                        <p class="text-muted">点击"新建文件夹"按钮创建您的第一个文件夹</p>
                        <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#createFolderModal">
                            <i class="fas fa-folder-plus me-1"></i>新建文件夹
                        </button>
                    </div>
                `;
                return;
            }
            
            let html = '<div class="table-responsive"><table class="table table-hover">';
            html += `
                <thead>
                    <tr>
                        <th><i class="fas fa-folder me-1"></i>文件夹名称</th>
                        <th><i class="fas fa-user me-1"></i>所属用户</th>
                        <th><i class="fas fa-map-marker-alt me-1"></i>文件夹路径</th>
                        <th><i class="fas fa-file-code me-1"></i>脚本数量</th>
                        <th><i class="fas fa-calendar me-1"></i>创建时间</th>
                        <th><i class="fas fa-cogs me-1"></i>操作</th>
                    </tr>
                </thead>
                <tbody>
            `;
            
            data.folders.forEach(folder => {
                const hasProtectedScripts = folder.has_protected_scripts;
                const protectedScriptName = folder.protected_script_name;
                
                html += `
                    <tr data-folder-name="${folder.name}" 
                        data-has-protected-scripts="${hasProtectedScripts}" 
                        data-protected-script-name="${protectedScriptName || ''}">
                        <td>
                            <div class="d-flex align-items-center">
                                    <i class="fas fa-folder text-primary me-2"></i>
                                <strong>${folder.name}</strong>
                                ${hasProtectedScripts ? '<i class="fas fa-shield-alt text-warning ms-2" title="包含已注册的脚本"></i>' : ''}
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-secondary">${folder.owner_username || '未知用户'}</span>
                        </td>
                        <td>
                            <code class="text-muted" style="font-size: 0.8rem;">${folder.relative_path || folder.path}</code>
                        </td>
                        <td>
                            <span class="badge bg-info">${folder.script_count}</span>
                        </td>
                        <td>
                            <small class="text-muted">${folder.created_time}</small>
                        </td>
                        <td>
                            <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-sm btn-outline-primary" 
                                            onclick="openFolder('${folder.name}', ${folder.owner_id})" title="打开文件夹">
                                    <i class="fas fa-folder-open"></i>
                                    </button>
                                ${hasProtectedScripts ? 
                                    `<button type="button" class="btn btn-sm btn-outline-warning" 
                                            onclick="showProtectedFolderMessage('${folder.name}', '${protectedScriptName}')" 
                                            title="文件夹内包含已注册的脚本，请先删除脚本或移动文件">
                                        <i class="fas fa-shield-alt"></i>
                                    </button>` :
                                    `<button type="button" class="btn btn-sm btn-outline-danger" 
                                            onclick="deleteFolder('${folder.name}', ${folder.owner_id})" title="删除文件夹">
                                        <i class="fas fa-trash"></i>
                                    </button>`
                                }
                            </div>
                        </td>
                    </tr>
                `;
            });
            
            html += '</tbody></table></div>';
            container.innerHTML = html;
        })
        .catch(error => {
            console.error('加载文件夹列表失败:', error);
            document.getElementById('foldersContainer').innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    加载文件夹列表失败，请刷新页面重试
                </div>
            `;
        });
}

// 打开文件夹
function openFolder(folderName, ownerId) {
    let url = `{{ url_for('view_custom_folder', folder_name='') }}${folderName}`;
    if (ownerId && '{{ current_user.username }}' === 'admin') {
        url += `?user_id=${ownerId}`;
    }
    window.location.href = url;
}

// 删除文件夹
function deleteFolder(folderName, ownerId) {
    // 检查文件夹是否包含已注册的脚本
    const folderElement = document.querySelector(`tr[data-folder-name="${folderName}"]`);
    if (folderElement && folderElement.dataset.hasProtectedScripts === 'true') {
        // 如果文件夹包含已注册的脚本，显示警告消息
        showProtectedFolderMessage(folderName, folderElement.dataset.protectedScriptName || '未知脚本');
        return;
    }
    
    if (confirm(`确定要删除文件夹 "${folderName}" 吗？\n\n注意：删除文件夹将同时删除其中的所有文件，此操作不可恢复！`)) {
        let url = `{{ url_for('delete_custom_folder', folder_name='') }}${folderName}`;
        if (ownerId && '{{ current_user.username }}' === 'admin') {
            url += `?user_id=${ownerId}`;
        }
        window.location.href = url;
    }
}

// 显示受保护文件夹消息
function showProtectedFolderMessage(folderName, scriptName) {
    alert(`安全警告：无法删除受保护的文件夹！\n\n文件夹 "${folderName}" 内包含已注册的脚本文件 "${scriptName}"。\n\n请先通过以下步骤处理：\n1. 在脚本管理页面删除该脚本\n2. 或将该脚本文件移动到其他文件夹\n\n只有在移除所有已注册脚本后，才能删除此文件夹。`);
    
    // 记录到控制台，便于调试
    console.warn(`尝试删除受保护文件夹被阻止: ${folderName}, 包含脚本: ${scriptName}`);
}

// 页面加载完成后加载文件夹列表
document.addEventListener('DOMContentLoaded', function() {
    loadFolders();
    
    // 监听模态框关闭事件，刷新文件夹列表
    const modal = document.getElementById('createFolderModal');
    modal.addEventListener('hidden.bs.modal', function() {
        // 清空表单和消息
        document.getElementById('createFolderForm').reset();
        document.getElementById('createFolderMessage').style.display = 'none';
        // 重新加载文件夹列表
        loadFolders();
    });
    
    // 处理创建文件夹表单提交
    document.getElementById('createFolderForm').addEventListener('submit', function(e) {
        e.preventDefault(); // 阻止默认表单提交
        
        const folderName = document.getElementById('folder_name').value.trim();
        const messageDiv = document.getElementById('createFolderMessage');
        const submitBtn = document.getElementById('createFolderBtn');
        
        if (!folderName) {
            showMessage(messageDiv, '请输入文件夹名称', 'danger');
            return;
        }
        
        // 禁用提交按钮，显示加载状态
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>创建中...';
        
        // 发送AJAX请求
        fetch('{{ url_for("create_custom_folder_api") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            credentials: 'same-origin', // 添加凭据，确保会发送Cookie
            body: JSON.stringify({
                folder_name: folderName
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showMessage(messageDiv, data.message || '文件夹创建成功！', 'success');
                // 清空表单
                document.getElementById('folder_name').value = '';
                // 2秒后关闭模态框并刷新列表
                setTimeout(() => {
                    const modal = bootstrap.Modal.getInstance(document.getElementById('createFolderModal'));
                    modal.hide();
                }, 1500);
            } else {
                showMessage(messageDiv, data.error || '创建文件夹失败', 'danger');
            }
        })
        .catch(error => {
            console.error('创建文件夹失败:', error);
            showMessage(messageDiv, '网络错误，请重试', 'danger');
        })
        .finally(() => {
            // 恢复提交按钮
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="fas fa-folder-plus me-1"></i>创建文件夹';
        });
    });
});

// 显示消息的辅助函数
function showMessage(messageDiv, message, type) {
    const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
    const icon = type === 'success' ? 'fas fa-check-circle' : 'fas fa-exclamation-triangle';
    
    messageDiv.innerHTML = `
        <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
            <i class="${icon} me-2"></i>${message}
        </div>
    `;
    messageDiv.style.display = 'block';
}
</script>

{% endblock %}